<script>
	// 什么是跨域(同源策略)
	// JSONP
	// CORS(跨域资源共享)
	/*  1. 原理:跨域问题其实是浏览器搞的鬼
      2. 请求阶段是不会报错的,响应阶段才会报错
      3. 流程:服务器在响应头中配置 Access-Control-Allow-Origin:"https://www.baidu.com" */
	// 代理服务器
</script>
<button id="btn">使用jsonp发送请求</button>
<script>
	// jsonp
	var data;
	// 声明一个函数用于接收数据
	function getData(data) {
		console.log(data);
		window.data = data;
	}
	btn.onclick = function () {
		let script = document.createElement("script");
		// 页面上的script标签只要拥有src属性,就会立马发送请求获取资源
		// script标签得到的内容,一定会解析为js来执行(会自动执行)

		// src只能是字符串,所以getData是一个函数名称,并不是整个函数
		script.src = "http://localhost:5000/jsonp?callback=getData";
		document.body.appendChild(script);
	};

	/* 服务器配合代码 */
	app.get("/jsonp", function (req, res) {
		// callback="getData"
		let { callback } = req.query;
		let data = 123;
		console.log("/register post success");
		res.send(`${callback}(${data})`); //"getData(123)"
	});
</script>

<script>
	// CORS(跨域资源共享)
	// 后台：返回允许浏览器在某个域上发送跨域请求的相关响应头
	// 使用cors, 允许跨域, 且允许携带跨域cookie
	app.use(function (req, res, next) {
		// console.log('----')
		// 允许跨域的地址
		res.header("Access-Control-Allow-Origin", "http://localhost:5500"); // 不要是*
		// 允许携带凭证(也就是cookie)
		res.header("Access-Control-Allow-Credentials", "true");
		// 允许跨域的请求头
		res.set("Access-Control-Allow-Headers", "Content-Type");
		// 放行
		next();
	});

	// 前台: 不需要做特别任何处理
	axios.defaults.withCredentials = true; // 允许携带cookie
	xhr.withCredentials = true;
</script>
<script>
	// 代理服务器
	/* 
    - 开发环境: 利用webpack-dev-server中的http-proxy-middle  进行正向代理
    - vue脚手架项目
    - react脚手架项目
    - 自定义webpack配置
    - 直接使用http-proxy-middle配置
    - 生产环境: 利用nginx进行反向代理
    - https://www.cnblogs.com/taostaryu/p/10547132.html
    */
</script>
